<template>
	<view class="content" v-show="status==!false">
		<!-- 调用轮播分页器 -->
		<uni-swiper-dot :info="shop.goodimgList"  :current="current" mode="round" :dots-styles="{ backgroundColoe:'rgba(0,0,0,0.5)',selectedBackgroundColor:'#ffffff',selectedBorder:'#fff' }">
			<swiper class="swiperContainer" @change="changeBanner" :autoplay="true" :interval="3000">
				<swiper-item v-for="item in shop.goodimgList" :key="item">
					<image class="img" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="item">
			<view class="item-v1">
				<view class="v1-name">{{shop.goodName}}</view>
				<view class="v1-price">
					<view class="price1">￥{{(shop.goodPrice / 0.9).toFixed(0)}}</view>
					<view class="price2">￥{{shop.goodPrice}}</view>
				</view>
			</view>
			<view class="item-v2">
				<view>销量：{{shop.goodSold}}</view>
				<view>收藏量：{{shop.goodCollect}}</view>
				<view>浏览量：{{shop.goodLook}}</view>
			</view>
			<view class="item-v3">
				<view class="v3-type"  @click="btn">
					<text>购买类型</text>
					<text>{{txt.val}}</text>
				</view>
				<view class="v3-type">
					<text>促销活动</text>
					<view class="huodong">
						<view v-for="item in shop.goodpromotion">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="v3-type">
					<text>服务</text>
					<label v-for="item in shop.goodservice">
						{{item.name}}
					</label>
				</view>
			</view>
		</view>
		<view class="photo">
			<view class="text">图文详情</view>
			<view class="img" v-for="item in list" :key="item">
				<image :src="item" mode="widthFix"></image>
			</view>
		</view>
		<view class="foot">
			<view class="kefu">
				<u-icon name="kefu-ermai" size="25"></u-icon>
				<view>客服</view>
			</view>
			<navigator url="/pages/index/index" open-type="switchTab">
				<view class="dianpu">
					<u-icon name="home" size="25"></u-icon>
					<view>首页</view>
				</view>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab">
				<view class="cart">
					<view class="box">
						<u-badge max="99" :value="values"></u-badge>
					</view>
					<u-icon name="shopping-cart" size="28"></u-icon>
					<view>购物车</view>
				</view>
			</navigator>
			<view class="u-button">
				<u-button @click="addCart" size="medium" type="error" shape="circle">加入购物车</u-button>
			</view>
			<view class="u-button">
				<u-button @click="pay" size="medium" type="warning" shape="circle">立即购买</u-button>
			</view>
		</view>
		<popup :list="shop,show" @k="msg"></popup>
	</view>
</template>

<script>
//引入请求文件
import { apiBanner,apiCart,apiDetail } from '../../api/mock'
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				status : false, // 
				list : [],		// 轮播图片地址
				current : 0,
				shop:{},	// 接收对象
				txt:{
					val:'请选择',
					num:''
				},
				comtype : true,
				cart:[],		//购物车数据
				paytype : '',
			}
		},
		onLoad(e) {
			console.log(e.id);
			uni.showLoading({
				title:'启动中...',
				mask:true,
			})
			this.getBanner();
			this.getDetail(e.id);
			this.getCart();
		},
		computed:{
			...mapState('cart',['cartList']),
			...mapState('payorder',['payList']),
			...mapState('login',['users','log']),
			values(){  //购物车微标
				return this.cartList.filter(item => item.show == false).length;
			}
		},
		watch:{
			shop(e){
				console.log(e);
				if(Object.keys(e).length>0){
					uni.hideLoading();
					this.status = true;
				}
			}
		},
		methods: {
			...mapActions('cart',['actionCartList']),
			...mapActions('payorder',['actionPayList','actionEmptyList']),
			msg(msg){
				this.txt.val =msg.val;
				this.txt.num =msg.num;
				if(this.paytype == '购买类型'){
					this.btn();
				}else if(this.paytype == '加入购物车'){
					this.addCart();
				}else if(this.paytype == '立即购买'){
					this.pay();
				}
				this.show.isShow = msg.show;
				console.log(this.show.isShow);
			},
			comment(){
				this.comtype =true;
			},
			open() {
				 this.isShow2=true;
				 console.log(this.isShow2);
				// console.log('open');
			},
			close() {
				this.isShow2 = false;
				// console.log('close');
				console.log(this.isShow2);
			},
			// 点击购买类型进行选择
			btn(e){
				if(this.log.account==''){
					setTimeout(()=>{
						uni.showToast({
							icon:'none',
							title:'您未登录，请先登录！'
						})
					},100)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					this.paytype ='购买类型';
					this.show.isShow =true;
				}
			},
			// 添加到购物车
			addCart(){
				this.paytype ='加入购物车';
				if(this.log.account==''){
					setTimeout(()=>{
						uni.showToast({
							icon:'none',
							title:'您未登录，请先登录！'
						})
					},100)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					console.log(1231);	
					// if(this.txt.val=='请选择'){
					// 	this.show.isShow =true;
					// }else{
						console.log(this.shop);
						let id =0;
						if(this.cartList.length==0){
							id =1;
						}else{
							id =this.cartList[this.cartList.length-1].id;
						}
						let k={
							id : id,
							goodid : this.shop.id,
							goodCollect : this.shop.goodCollect,
							goodImg : this.shop.goodImg,
							goodLook : this.shop.goodLook,
							goodName : this.shop.goodName,
							goodPrice : this.shop.goodPrice,
							goodSold : this.shop.goodSold,
							num : this.txt.num,
							val : this.txt.val,
							selected: false,
							show: false
						}
						this.actionCartList(k);
						uni.showToast({
							title:'成功加入购物车'
						})
						this.txt.val='请选择';
					// }
				}
			},
			// 立即购买
			pay(){
				this.paytype ='立即购买';
				if(this.log.account==''){
					setTimeout(()=>{
						uni.showToast({
							icon:'none',
							title:'您未登录，请先登录！'
						})
					},100)
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					this.show.isShow =true;
					this.actionEmptyList();
					if(this.txt.val !='请选择'){
						let k =[{
							goodImg : this.shop.goodImg,
							goodName : this.shop.goodName,
							goodPrice : this.shop.goodPrice,
							num : this.txt.num,
							selected : false,
							id : this.shop.id,
							val : this.txt.val,
						}]
						let obj ={
							sum : this.Price,
							kd : '普通配送 (包邮)',
							bz : '',
							yf : 0.00,
							yfx : 0.00,
							time : new Date().getTime(),
							goodlist : k,
						}
							this.actionPayList(obj)
						uni.navigateTo({
							url:'/pages/pay/pay?id=' + this.shop.id + '&num=' + this.txt.num
						})
						this.txt.val='请选择';
					}
				}
			},
			// 轮播改变事件
			changeBanner(e){
				this.current = e.detail.current;
			},
			// 调用请求轮播数据的函数
			getBanner(){
				// 调用函数
				apiBanner('asc').then((res)=>{
					uni.hideLoading();
					this.list =res;
					console.log(this.list);
				}).catch((err)=>{
					console.log(err);
				})
			},
			// 调用商品详情数据的函数
			getDetail(id){
				// 调用函数
				apiDetail(id).then((res)=>{
					uni.hideLoading();
					this.shop =res;
					console.log(this.shop.goodimgList);
					this.clength =res.goodCommectDetail.length;
					this.favorale =res.goodCommectDetail.favorale;
					let k = res.goodCommectDetail.filter((item)=>{
						return item.favorale==1
					})
					this.rating =k.length / this.clength;
					console.log(k);
					console.log(this.clength);
					console.log(this.shop);
				}).catch((err)=>{
					console.log(err);
				})
			},
			// 调用购物车数据的函数
			getCart(){
				apiCart().then((res)=>{
					uni.hideLoading();
					this.cart =res;
					console.log(this.cart);
				}).catch((err)=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style>
.content{
	width: 100%;
}
.swiperContainer .img{
	width: 100%;
}
.item{
	width: 100%;
}
.item .item-v1{
	width: 90%;
	margin: 0 auto;
}
.item .item-v1 .v1-name{
	width: 100%;
	margin: 10px auto;
	font-size: 18px;
	overflow-wrap: normal;
}
.item .item-v1 .v1-price{
	display: flex;
	align-items: center;
}
.item .item-v1 .v1-price .price1{
	font-size: 14px;
	color: #999999;
	text-decoration: line-through;
}
.item .item-v1 .v1-price .price2{
	font-size: 14px;
	color: red;
	margin-left: 15px;
}
.item-v2{
	width: 94%;
	margin: 10px auto;
	display: flex;
	align-items: center;
}
.item-v2 view{
	width: 30%;
	font-size: 14px;
	color: #909399;
}
.item-v3{
	width: 94%;
	margin: 0px auto;
}
.item-v3 .v3-type{
	margin: 20px auto;
	display: flex;
	align-items: center;
}
.item-v3 .v3-type .huodong{
	width: 80%;
	margin: 0 auto;
	line-height: 24px;
	overflow: hidden;
	flex-wrap: wrap;
	font-size: 13px;
}
.item-v3 .v3-type text:nth-child(1){
	width: 20%;
	font-size: 12px;
	color: #909399;
}
.item-v3 .v3-type text:nth-child(2){
	line-height: 24px;
	font-size: 13px;
}
.item-v3 .v3-type label{
	width: 20%;
	font-size: 13px;
}
.photo{
	width: 100%;
	padding-bottom: 70px;
}
.photo .text{
	text-align: center;
	font-size: 15px;
	margin: 10px auto;
}
.photo .img image{
	width: 100%;
}
.foot{
	width: 100%;
	height: 60px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	justify-content: space-around;
	background-color: white;
}
.foot .kefu{
	font-size: 12px;
}
.foot .dianpu{
	font-size: 12px;
}
.foot .cart{
	position: relative;
	text-align: center;
	font-size: 12px;
}
.foot .cart .box{
	position: absolute;
	left: 25px;
}
.foot .u-button{
	width: 100px;
	font-size: 15px;
	height: 35px;
}
</style>